<template>
  <div class="pad-content-box form-no-padding-box padding-top-20">
    <el-form label-width="130px" size="small" :model="searchParams">
      <el-row :gutter="50">
        <el-col :span="6">
          <el-form-item label="付款类型">
            <el-select v-model="searchParams.fundsTypeItemList" multiple :collapse-tags="true" placeholder="请选择">
              <el-option
                v-for="item in paymentList"
                :key="item.key"
                :label="item.value"
                :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标题">
            <el-input v-model="searchParams.likeFundsDesc" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付款事项">
            <el-select v-model="searchParams.chargeItemList" multiple placeholder="请选择">
              <el-option
                v-for="item in paymentLattersList"
                :key="item.chargeItem"
                :label="item.chargeItemName"
                :value="item.chargeItem">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收款人">
            <el-input v-model="searchParams.likeChargeUserName" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请开始日期">
            <el-date-picker 
              v-model="searchParams.applyTime" 
              value-format="timestamp"
              placeholder="请选择"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际付款日期">
            <el-date-picker 
              v-model="searchParams.actualPaymentDate" 
              value-format="timestamp"
              placeholder="请选择"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付款状态">
            <el-select v-model="searchParams.recordStatus" placeholder="请选择" clearable>
              <el-option
                v-for="item in statusList"
                :key="item.key"
                :label="item.value"
                :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-button type="primary" size="small" class="f-right" @click="getPaymentList">查询</el-button>
        <el-button type="primary" size="small"  class="f-right margin-right-10" @click="payMent">付款</el-button>
        <el-button type="primary" size="small"   class="f-right" @click="out()">Excel导出</el-button>
      </el-col>
    </el-form>
    <el-table class="margin-top-20 has-tab-header-border new-table-style bold-scrollbar-table" border :data="tableData" ref="multipleTable"  @select-all="onSelectAll" @selection-change="handleSelectionChange">
      <el-table-column  type="selection" width="55"> </el-table-column>
      <el-table-column  label="付款类型" prop="fundsTypeItemName" width="100"> </el-table-column>
      <el-table-column  label="标题" prop="fundsDesc" width="240"> </el-table-column>
      <el-table-column  label="付款事项" prop="chargeItemName" width="130"> </el-table-column>
      <el-table-column  label="申请时间" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.applyTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="申请付款金额" prop="applyAmount" width="130"> </el-table-column>
      <el-table-column  label="收款人" prop="chargeUserName" width="150"> </el-table-column>
      <el-table-column  label="实际付款金额" prop="paymentAmount" width="130"> </el-table-column>
      <el-table-column  label="实际付款时间" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.actualPaymentDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="付款批次" prop="batchNo" width="90"> </el-table-column>
      <el-table-column  label="付款公司" prop="payer" width="140"> </el-table-column>
      <el-table-column  label="付款账户" prop="paymentAccount" width="130"> </el-table-column>
      <el-table-column  label="付款状态" prop="recordStatusName" width="90"> </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next"/>
    <el-dialog :visible.sync="showAddDialog" title="付款" width="90%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose" >
      <payMoney @closeDialog="closeDialog" ref="saleReportAdd" :tableData="multipleTable"></payMoney>
    </el-dialog>
  </div>
</template>

<script>
  import {paymentList,paymentItemList,paymentListExport,recordConstant} from '../../api/payManage';
  import payMoney from './modules/payMoney.vue';
  export default {
    name: 'salesReport',
    components:{payMoney},
    data() {
      return {
        paymentList:[],
        paymentLattersList:[],
        multipleTable:[],
        searchParams:{},
        tableData:[],
        currentPage: 1,
        pageSize: 10,
        total:0,
        showAddDialog:false,
        statusList:[]
      };
    },
    created() {
      this.getPaymentList()
      this.getConstant()
      this.getPaymentItemList()
    },
    methods: {
      //常量
      async getConstant() {
        let res = await recordConstant();
        this.paymentList = res.fundsTypeItem
        this.statusList = res.recordStatus
      },
      async getPaymentItemList(){
        let res = await paymentItemList()
        this.paymentLattersList = res.rows
      },
      onSelectAll() {
        this.$refs.multipleTable.clearSelection();
      },
      handleSelectionChange(rows){
        if(rows.length>0){
          rows.forEach(element => {
            if(element.checkFlag){
              this.$refs.multipleTable.toggleRowSelection(element, true);
            }else{
               this.$refs.multipleTable.toggleRowSelection(element, false);
            }
          });
        }
        this.multipleTable = rows
      },
      async getPaymentList(more){
        let res = await paymentList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          ...this.searchParams,
          geApplyTime:this.searchParams.applyTime?this.searchParams.applyTime[0]:null,
          leApplyTime:this.searchParams.applyTime?this.searchParams.applyTime[1]:null,
          geActualPaymentDate:this.searchParams.actualPaymentDate?this.searchParams.actualPaymentDate[0]:null,
          leActualPaymentDate:this.searchParams.actualPaymentDate?this.searchParams.actualPaymentDate[1]:null,
          projectKeys:[localStorage.getItem('projectKey')]
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(page) {
        this.currentPage = page.currentPage
        this.getPaymentList('more');
      },
      payMent(){
        if(this.multipleTable.length==0){
          this.$message.error('请选择账单！')
          return
        }
        this.showAddDialog = true
      },
      closeDialog(data){
        this.showAddDialog = false
        if(data.success){
          this.getPaymentList()
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleClose(){
        this.$refs.saleReportAdd.closeDialog({success:false})
      },
       //导出
      async out() {
        let res = await paymentListExport({
          ...this.searchParams,
          geApplyTime:this.searchParams.applyTime?this.searchParams.applyTime[0]:null,
          leApplyTime:this.searchParams.applyTime?this.searchParams.applyTime[1]:null,
          geActualPaymentDate:this.searchParams.actualPaymentDate?this.searchParams.actualPaymentDate[0]:null,
          leActualPaymentDate:this.searchParams.actualPaymentDate?this.searchParams.actualPaymentDate[1]:null 
        })
        window.location.href = res.url
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  ::v-deep .cell{
    text-align: center;
  }
</style>
